<template>
    <div>
        <div class="login-content">
            <!-- <mt-button class="mode" @click="showMode = !showMode" type="default" plain>{{checkedItem == 0?"箱子订单一对一扫描":"箱子订单一对多扫描"}}<i class="iconfont icon-xiala"></i></mt-button>
            <mt-radio
            v-if="showMode"
            v-model="checkedItem"
            :options="selectList">
            </mt-radio> -->
            <div class="input-content">
                <input type="text" autofocus v-model="code" placeholder="请扫描箱子/订单二维码" @change="getCode"  @keyup.enter="getCode">
                <!-- <button @click="getCode">提交</button> -->
            </div>
            <!-- <div class="box-code" v-else>
                <span>绑定箱子:{{getMyCode()}}</span>
                <mt-button plain type="danger" size="small" @click.native="unbind">解绑</mt-button>
            </div> -->
            <!-- <div class="input-content">
                <input type="text" autofocus v-model="order_code" placeholder="请扫描订单二维码" @keyup.enter="getOrderCode">
            </div> -->
            <div class="order-list">
                <div class="order-item" v-for="(item,index) of orders" :key="index">
                    <p @click="showDetail(item.box)"><i class="iconfont" :class="isCodeShow == item.box?'icon-zhankai red-icon':'icon-shouqi'"></i>
                        箱子:{{item.box?item.box:'未选择箱子'}}
                        <i class="iconfont icon-lajitong del-icon" @click="delBox(item.box)"></i>
                    </p>
                    <div class="code-list" v-show="isCodeShow == item.box">
                        <p v-for="(i,k) of item.codes" :key="k">
                            订单:{{i}}
                            <i class="iconfont icon-lajitong del-icon" @click="delNowOrder(i)"></i>
                        </p>
                        <p v-show="!item.codes">暂无装箱订单</p>
                    </div>
                </div>
                <!-- <mt-cell :title="'箱子:'+item.box" :label="'订单:'+item.code" v-for="(item,index) of orders" :key="index">
                    <mt-button size="small" @click="delItem(item)">x</mt-button>
                </mt-cell> -->
            </div>
        </div>
        <div class="btn-group all-btn">
            <mt-button size="large" plain type="danger" @click.native="scan"><i class="iconfont icon-saomiao"></i>二维码扫描</mt-button>
            <mt-button size='large' type="danger" @click="submit"><i class="iconfont icon-zhuangxiang"></i>订单装箱</mt-button>
            <mt-button size='large' type="danger" plain @click="getBoxList"><i class="iconfont icon-daiqujian"></i>已装箱订单</mt-button>
            <mt-button size='large' type="danger" plain @click.native="()=>{$router.push('/historyOrder')}"><i class="iconfont icon-lishi"></i>历史已装箱订单</mt-button>
            <mt-button size='large' type="danger" plain @click="delOrder"><i class="iconfont icon-lajitong"></i>删除已装箱订单</mt-button>
            <mt-button size="large" plain type="danger" @click.native="loginOut"><i class="iconfont icon-Group"></i>退出登录</mt-button>
        </div>
        <div>
            <mt-popup
            v-model="popupVisible"
            position="right">
                <div class="box_order">
                    <div v-for="(item,index) of order_list" :key="index">
                        <p class="title">{{item.box_qrcode}}</p>
                        <p class="item"  v-for="(i,k) of item.order" :key="k">{{i.order_no}}</p>
                        <p class="item total">该箱总计数量:<span class="num">{{item.order.length}}</span></p>
                    </div>
                </div>
            </mt-popup>
        </div>
    </div>
</template>
<script>
import {boxStatus,boxUse,boxModify,boxOrderList,wxSign} from '../api'
import {Toast,MessageBox} from 'mint-ui'
import cookie from '../cookie'
import wxScan from '../wxScan';
export default {
    data() {
        return {
            checkedItem:"0",
            showMode:false,
            code:'',
            code_copy:'',
            roleinfo:{},
            // inputDisabled:cookie.get('data','code')?true:false,
            order_code:'',
            orders:[],
            popupVisible:false,
            order_list:[],
            isCodeShow:false
        }
    },
    created(){
        this.orders = cookie.get('orders','orders')?JSON.parse(cookie.get('orders','orders')):[];
        this.roleinfo = JSON.parse(cookie.get('data','roleinfo'));
    },
    methods:{
        scan(){
            const data = {
              token:cookie.get('data','token'),
              url:window.location.href.split('#')[0],
              id:this.roleinfo.id
          }
        //   console.log(data);
          wxSign(data).then(res=>{
              wxScan.wxRegister(res.data).then(res=>{
                // console.log(res);
                this.code = res.resultStr;
                this.getCode();
                // console.log('获取成功');
              }).catch(err=>{
                // console.log(err);
                Toast('扫描失败,请重试');
              })
          })
        },
        showDetail(box){
            if(this.isCodeShow == box){
                this.isCodeShow = "";
            }else{
                this.isCodeShow = box;
            }
        },
        getBoxList(){
                const data = {
                    token:cookie.get('data','token'),
                    uid:this.roleinfo.id
                }
                boxOrderList(data).then(res=>{
                    // console.log(res);
                    this.order_list = res.data;
                    this.popupVisible = !this.popupVisible
                })
        },
        getMyCode(){
            return cookie.get('data','code')
        },
        getOrderCode(){
            let i = this.orders.indexOf(this.order_code);
            if(i !== -1){
                Toast("该订单重复，请勿重复扫描");
                this.order_code = "";
                return;
            }
            this.orders.push(this.order_code);
            this.order_code = '';
        },
        getCode(){
            // Toast(`${this.code.length}`);
            // this.code = '';
            // return;
            cookie.set('orders','orders',JSON.stringify(this.orders));
            if(this.code.length !== 20 && this.code.length !== 22){
                return;
            }
            if(this.code.length == 20) this.code_copy = this.code;
            console.log(this.code_copy);
            if(this.code.length == 20){
                // orders.push({box:code})
                let a = 0;
                for(let i of this.orders){
                    if(i.box == this.code){
                        a = 1;
                    }
                    if(i.box == '' && !a){
                        i.box = this.code;
                        this.code = "";
                        return;
                    }
                }
                if(!a){
                    this.orders.push({box:this.code});
                }
                this.code = "";
            }else{
                // console.log(this.code_copy);
                if(this.code_copy){
                    for(let i of this.orders){
                        if(this.code_copy == i.box){
                            if(i.codes){
                            (i.codes).push(this.code);
                            }else{
                                i.codes = [this.code];
                            }
                            this.code = "";
                            return;
                        }
                    }
                }else{
                    let a = 0;
                    for(let i in this.orders){
                        if(this.orders[i].box == ""){
                            // i.codes.push(this.code);
                            // return;
                            a=i;
                        }
                        // else{
                        //     this.orders.push({box:'',codes:[this.code]});
                        //     return;
                        // }
                    }
                    // console.log(a);
                    if(!a){
                        this.orders.push({box:'',codes:[this.code]});
                    }else{
                        this.orders[a].codes.push(this.code);
                    }
                    this.code_copy = "";
                }
            }
            // console.log()
            // boxStatus({code,school_id:this.roleinfo.school_id,token:cookie.get('data','token')}).then(res=>{
            //     if(res.code == 200){
            //         if(!res.data.status){
            //             MessageBox.confirm('该箱子未使用,确认使用?').then(action => {
            //                 this.setBoxUse(res.data.code,1);
            //             });
            //         }else{
            //             Toast("该箱子已使用");
            //             cookie.set('data','code',code);
            //             // this.inputDisabled = true
            //         }
            //     }else{
            //        Toast("二维码错误，请重新扫描");
            //     }
            // })
            this.code = "";
        },
        // setBoxUse(code,status){
        //     const data = {
        //         status,
        //         code,
        //         token:cookie.get('data','token'),
        //         school_id:this.roleinfo.school_id
        //     }
        //     boxUse(data).then(res=>{
        //         console.log(res);
        //         if(res.code == 200){
        //             if(!this.inputDisabled){
        //                 cookie.set('data','code',code);
        //                 // this.inputDisabled = true;
        //                     Toast("绑定成功");
        //                     this.code = "";
        //             }else{
        //                 cookie.unset('data','code');
        //                 // this.inputDisabled = false;
        //                 Toast("解绑成功");
        //             }
        //         }else{
        //             if(status){
        //                 Toast("绑定失败");
        //             }else{
        //                 // Toast("解绑失败");
        //                 MessageBox.confirm('该箱子已使用,确认切换其他箱子?').then(action => {
        //                     // this.setBoxUse(res.data.code,1);
        //                     cookie.unset('data','code');
        //                     this.orders = [];
        //                     this.inputDisabled = false;
        //                 });
        //             }
        //         }
        //     })
        // },
        // unbind(){
        //     this.setBoxUse(this.getMyCode(),0);
        // },
        delItem(i){
            // console.log(i);
            let index = this.orders.indexOf(i);
            if (index > -1) {
                this.orders.splice(index, 1);
            }
        },
        submit(){
            MessageBox.confirm('订单装箱后该箱子不能再次装箱，是否确认已扫描完成订单?').then(action => {
                const {orders,roleinfo} = this;
                let data = {
                    data:JSON.stringify(orders),
                    // code:this.getMyCode(),
                    uid:roleinfo.id,
                    token:cookie.get('data','token'),
                    type:1
                    // school_id:this.roleinfo.school_id
                }
                console.log(data);
                boxModify(data).then(res=>{
                    console.log(res);
                    // Toast(res.msg);
                    let msg =  '';
                    for(let i of res.data){
                        msg+=`${i.order_no},${i.dormitory_name},${i.is_pay?'已支付':'未支付'}<br/>`
                    }
                    MessageBox.confirm(msg).then(action => {
                        data.type = 2;
                        boxModify(data).then(res=>{
                            Toast(res.msg);
                        if(res.code == 200){
                            cookie.unsetAll('orders');
                            this.orders = [];
                        }
                        }).catch(err=>{
                            console.log(err);
                        })
                    });
                }).catch(err=>{
                    console.log(err);
                })
            })
        },
        delOrder(){
            this.$router.push('/delIndex');
        },
        delBox(box){
            for(let i in this.orders){
                if(this.orders[i].box == box){
                    this.orders.splice(i,1);
                    cookie.set('orders','orders',JSON.stringify(this.orders));
                    return;
                }
            }
        },
        delNowOrder(order_no){
            for(let i of this.orders){
                for(let a in i.codes){
                    if(i.codes[a] == order_no){
                        i.codes.splice(a,1);
                        cookie.set('orders','orders',JSON.stringify(this.orders));
                        return;
                    }
                }
            }
        },
        loginOut(){
            cookie.unsetAll('data');
            cookie.unsetAll('orders');
            this.$router.push('/');
        }
    }
}
</script>
<style scoped>
    .box-code{
        height: 6rem;
        font-weight: 700;
        font-size: 1rem;
        color: #666;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .box-code span{
        width:60%;
         white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
    }
    .btn-group button{
        margin-top: 1rem;
    }
    .box_order{
        width: 20rem;
        height: 100vh;
        overflow: auto;
    }
    .box_order .title{
        line-height: 2rem;
        font-size: 1rem;
        font-weight: bold;
        padding-left: 1rem;
        color: #333;
    }
    .box_order .item{
        text-align: center;
        font-size: 0.9rem;
        color: #6b6b6b;
        border-bottom: 0.02rem solid #ccc;
        margin: 0 1rem;
        line-height: 1.5rem;
    }
    .box_order .total{
        text-align: right;
        border: none;
        font-size: 1rem;
        line-height: 2rem;
        color: #333;
    }
    .box_order .total .num{
        color: #F23D3D;
        padding: 0 0.4rem;
    }
    .order-item{
        /* display: flex; */
        /* justify-content: space-between; */
        /* align-items: center; */
        border-bottom: 1px solid #ccc;
        text-align: left;
        padding: 0.2rem;
    }
    .order-item>p,.order-item>div{
        /* width: 50%; */
        line-height: 2rem;
        white-space: nowrap;
        /* padding: 1rem; */
    }
    .code-list{
        padding-left: 1.9rem;
    }
    .shangla{
        transform: rotate(180deg);
        transition: all 1s;
    }
    .order-item .iconfont{
        margin-right:0.4rem;
    }
    .red-icon{
        color: #ef4f4f;
    }
    .mode{
        /* line-height: 3rem; */
        /* text-align: left; */
        margin-top: 1rem;
    }
    .all-btn{
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .all-btn button{
        width: 33.3%;
        height: 6rem;
        border-radius: 0;
        border-width: 0;
        border-color: #F23D3D;
        border-right-width: 0.1rem;
        border-bottom-width: 0.1rem;
        margin: 0;
    }
    .all-btn button .iconfont{
        margin: 0.2rem;
    }
    .all-btn button:nth-child(3n){
        border-right: 0;
    }
    .all-btn button:nth-child(-n+3){
        border-top-width: 0.1rem;
    }
    .del-icon{
        position: absolute;
        right: 1rem;
    }
</style>